import 'package:flutter/material.dart';
import 'package:surfaceim/common/values/values.dart';
import 'package:surfaceim/common/widgets/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_verification_box/verification_box.dart';
import 'package:get/get.dart';

import '../controller.dart';

class VerificationCode extends GetView<SignUpController> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 49.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
              padding: EdgeInsets.only(top: 72.h, right: 68.h, left: 68.h),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  primaryTitle(title: '请输入验证码'),
                  Padding(
                    padding: EdgeInsets.only(top: 55.h),
                    child: Container(
                      height: 103.w,
                      child: VerificationBox(
                        borderRadius: 10,
                        autoFocus: false,
                        itemWidget: 103.w,
                        showCursor: false,
                        cursorWidth: 2,
                        borderWidth: 2,
                        cursorIndent: 10,
                        cursorEndIndent: 10,
                        count: 4,
                        focusBorderColor: AppColors.primaryElementSecondary,
                        onSubmitted: (value) {
                          if (value.length == 4) {
                            controller.mobileLogin(verificationCode: value);
                          }
                        },
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 30.h),
                    child: Center(
                      child: Text(
                        "已发送验证码至：${controller.mobileController.nsn}",
                        style:
                            TextStyleTertiary(color: AppColors.tipsElementText),
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 64.h),
                    child: Center(
                      child: GetBuilder<SignUpController>(
                        id: 'countDown',
                        init: controller,
                        builder: (_) {
                          return primaryButtonWidget(
                            disable: controller.afresh,
                            width: 370,
                            title:
                                '重新发送 ${controller.afresh ? controller.countDown.toString() + 'S' : ''}',
                            onPressed: controller.afreshCode,
                          );
                        },
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 30.h),
                    child: Center(
                      child: Text(
                        '没有收到验证码?',
                        style:
                            TextStyleTertiary(color: AppColors.primaryElement),
                      ),
                    ),
                  )
                ],
              )),
        ],
      ),
    );
  }
}
